<template>
  <view class="contact-teacher">
    <image
      v-if="receiveTeacher"
      class="teacher-btn-img"
      :src="teacher_btn"
      @tap="isOpened = true"
    />
    <AtCurtain v-if="receiveTeacher" :is-opened="isOpened" :on-close="onClose">
      <view class="teacher-pop">
        <view class="title">
          联系老师
        </view>
        <view class="text">
          添加老师获取1对1服务
        </view>
        <view class="img-wrap">
          <image
            :lazy-load="true"
            class="QR-code"
            :src="receiveTeacher.qrcode_url"
            :show-menu-by-longpress="true"
          />
        </view>
        <view class="contact-teacher__wechat"
          >微信号：{{ receiveTeacher.phone }}</view
        >
        <view @tap="copy" class="contact-teacher__copy">复制微信号</view>
      </view>
    </AtCurtain>
  </view>
</template>

<script>
import { AtCurtain } from "taro-ui-vue";
import { receiveTeacher } from "_api/home";
import { teacher_btn } from "@/libs/image-url";
import globalData from "@/libs/globalData";
import Taro from "@tarojs/taro";
export default {
  name: "ContactTeacher",
  components: {
    AtCurtain
  },
  props: {
    isReQequest: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      teacher_btn,
      isOpened: false,
      receiveTeacher: {},
      query: {}
    };
  },
  computed: {},
  watch: {
    isReQequest(newVal) {
      if (newVal) this.getTeacher();
    }
  },
  created() {
    this.getTeacher();
  },
  methods: {
    copy() {
      Taro.setClipboardData({
        data: this.receiveTeacher.phone
      });
    },
    getTeacher() {
      this.query = {
        city_id: Taro.getStorageSync("city_id"),
        grade_id: Taro.getStorageSync("grade_id")
      };
      this.$emit("update:isReQequest", false);
      receiveTeacher(this.query)
        .then(r => {
          this.receiveTeacher = r.data;
        })
        .catch(e => {
          this.receiveTeacher = null;
        });
    },
    onClose() {
      this.isOpened = false;
    }
  }
};
</script>

<style lang="scss">
@import "~taro-ui-vue/dist/style/components/curtain.scss";
/* $copyBtnBg: '';
$contactPopBg: ''; */
.contact-teacher {
  text-align: center;
  &__wechat {
    font-size: 24px;
    color: #303133;
    margin-bottom: 32px;
  }
  &__copy {
    width: 217px;
    height: 64px;
    display: inline-block;
    background-image: url("https://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/1610281841023_0.3204673070554356");
    background-size: 100% auto;
    background-repeat: no-repeat;
    color: #fff;
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    line-height: 64px;
  }
  .at-curtain__btn-close {
    bottom: -105px !important;
  }
  .teacher-pop {
    width: 578px;
    height: 722px;
    background-image: url("https://xthk-edu-test.oss-cn-shenzhen.aliyuncs.com/public/20210110/1610280921020.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    overflow: hidden;
    .title {
      font-size: 40px;
      font-weight: bold;
      color: #a13d0f;
      text-align: center;
      margin-top: 16px;
    }
    .text {
      font-size: 32px;
      font-weight: bold;
      color: #303133;
      text-align: center;
      margin-top: 80px;
    }
    .img-wrap {
      width: 280px;
      height: 280px;
      margin: 48px auto 24px;
      .QR-code {
        width: 100%;
        height: 100%;
      }
    }
  }
  .teacher-btn-img {
    width: 160px;
    height: 168px;
    position: fixed;
    z-index: 8;
    bottom: 150px;
    right: 16px;
  }
}
</style>
